<template>
    <div class="item">
        <div class="top">
            <div class="left">
                <p class="name">{{ medicine.name }}</p>
                <p class="dosage">{{ medicine.dosage }}</p>
            </div>
            <div class="right">
                <el-switch
                    v-model="medicine.status"
                    active-color="#13ce66"
                >
                </el-switch>
            </div>
        </div>

        <div class="Alltime">
            <span class="time" v-for="item in medicine.reminderItemList">{{ item.date }}</span>
        </div>
        <div class="removeBtn">
            <div class="timeRound">
                {{ medicine.startDate }} - {{ medicine.endDate }}
            </div>
            <div class="conf">
                <van-icon class="btnFocus" name="edit" @click="editMedicine"/>
                <van-icon class="btnFocus" name="delete-o" @click="removeMedicine"/>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: "MedicineCard",

    props: {
        id: {
            type: String,
            required: true
        },
        name: {
            type: String,
            required: true
        },
        startDateTimeStamp: {
            type: String,
            required: true
        },
        endDateTimeStamp: {
            type: String,
            required: true
        },
        dosage: {
            type: String,
            required: true
        },
        status: {
            type: Boolean,
            required: true
        },
        reminderItemList: {
            type: Array,
            required: true
        }
    },

    data() {
        return {
            medicine: {
                id: this.id,
                name: this.name,
                startDate: this.$public.formatTimeStampToYYMMDD(this.startDateTimeStamp),
                endDate: this.$public.formatTimeStampToYYMMDD(this.endDateTimeStamp),
                dosage: this.dosage,
                reminderItemList: this.reminderItemList.map(reminderItem => {
                    return {
                        id: reminderItem.id,
                        date: this.$public.formatTimeStampToHHmm(reminderItem.timeStamp),
                    }
                }),
                status: this.status
            },
        }
    },

    methods: {
        removeMedicine() {
            this.$dialog.confirm({
                title: '删除提醒',
                message: `确认删除 ${this.medicine.name} 的服药提醒吗？`,
                overlay: false
            }).then(() => {
                this.request.post("/medicineReminder/removeMedicine/", {
                    medicineId: this.medicine.id
                }).then((response) => {
                    const status = response["code"] === 200

                    if (status) {
                        setTimeout(() => {
                            location.reload()
                        }, 500)
                    }
                })
            })
        },

        editMedicine() {
            this.$router.push(`/editMedicineView/${this.medicine.id}/`)
        },
    },

    watch: {
        'medicine.status': {
            handler(newData, oldData) {
                this.request.post("/medicineReminder/changeReminderStatus/", {
                    medicineId: this.medicine.id,
                    status: newData
                }).then((response) => {
                    const status = response["code"] === 200

                    if (!status) {
                        this.medicine.status = oldData
                    }
                })
            }
        }
    }
}
</script>

<style lang="less" scoped>
a {
    display: inline-block;
    color: black;
}

.top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .name {
        font-size: 30px;
        font-weight: 700;
    }

    .dosage {
        padding-top: 5px;
        color: #777777;
    }
}

.mid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 18px;
    margin-bottom: 10px;
}

.Alltime {
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: left;
    flex-wrap: wrap;

    .time {
        padding: 3px 8px;
        box-sizing: border-box;
        display: inline-block;
        color: white;
        background: rgba(var(--colorR), var(--colorG), var(--colorB), 0.5);
        text-align: center;
        border-radius: 15px;
        margin-right: 8px;
        margin-bottom: 5px;
    }
}

.item {
    width: 100%;
    margin: 5px 0;
    padding: 20px 30px;
    box-sizing: border-box;
    background-color: white;
    border-radius: 10px;
    margin-bottom: 15px;
    white-space: nowrap;

    .left {
        width: 80%;

        p {
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    .timeRound {
        color: var(--color);
        margin: 5px 0;
    }

    .removeBtn {
        width: 100%;
        justify-content: space-between;
        display: flex;
        align-items: center;
        margin: 8px 0;

        .timeRound {
            color: var(--color);
        }

        .conf > .van-icon {
            margin-left: 30px;
            font-size: 2rem;
        }

    }
}
</style>